<!-- 内容区开始 -->
<style type="text/css">
    .ui.form select{ }
</style>
<div class="cont">
    <div class="position">
        <img alt="位置图标" src="dist/images/position.png" />营销管理&gt;产品管理
        <a ng-click="openDetail()" ng-hide="$needClientCache" title="打开新窗口查看"><i class="large External icon"></i></a>
    </div>
    <div class="mybackground">
        <div class="cont_fr_top">
            <div class="menus_top" style="border-bottom: 0px;">
                <div class="cont_fr_btn">
                    <div class="fr">
                        <button class="cont_f_btn3" ng-click="showAddProduct()"><i class="add icon"></i>添加</button>
                    </div>
                </div>
            </div>
            <div class="menus">
                <div class="menus_con">
                    <div class="ui form">
                        <div class="four fields">
                            <div class="inline field">
                                <label>产品名称</label>
                                <input type="text" ng-model="search_param.product_name" placeholder="产品名称" ng-keyup="$event.keyCode == 13 && search()">
                            </div>
                            <div class="inline field">
                                <label>归属产品线</label>
                                <select ng-model="search_param.product_line" style="padding: 0.3em 1em; width: 160px">
                                    <option ng-repeat="sel in product_lineall" ng-selected="search_param.product_line == sel.product_line_code" value="{{sel.product_line_code}}">{{sel.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="fields" style="margin-left: 4.3em;">
                            <div class="four wide field">
                                <button class="search_btn" ng-click="search()">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="menus_table">
        <table class="ui yellow celled striped table">
            <thead>
                <tr>
                    <th>产品名称</th>
                    <th>产品类型</th>
                    <th>投资顾问</th>
                    <th>归属分公司</th>
                    <th>归属产品线</th>
                    <th>风险等级</th>
                    <th>备注信息</th>
                    <th style="text-align: center; width: 200px;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="vproduct in product_list">
                    <td style="word-wrap:break-word;">{{vproduct.name}}</td>
                    <td>标准产品</td>
                    <td>{{vproduct.nickname}}</td>
                    <td>总公司</td>
                    <td>{{vproduct.line_name}}</td>
                    <td>
                        <span  product-risk-rank  rank="{{::vproduct.risk_rank}}"></span>
                    </td>
                    <td ng-attr-title="{{vproduct.remark}}" style="word-wrap:break-word;" class="ellipsis" ng-attr-title="{{vproduct.remark}}">{{vproduct.remark}}</td>
                    <td style="text-align: center;">
                        <!-- <a href="javascript:;" title="查看套餐"
                        ng-click="viewPackage(vproduct.product_id)" class="edit_color">查看套餐</a> -->
                        <a href="javascript:;" title="编辑" ng-click="showEditProduct(vproduct.product_id)" class="edit_color">编辑</a>
                        <a href="javascript:;" title="删除" ng-click="delProduct()" class="delete_color">删除</a>
                    </td>
                </tr>
            </tbody>
            <tbody ng-show="rcode==2">
                <tr ng-show="!busy">
                    <td colspan="7" style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                </tr>
            </tbody>
        </table>
        <div ng-if="productPage.pageAll >1 && rcode==1" class="ui pagination fr menu" jspagination page-object="productPage" page-func="getProductList">
        </div>
    </div>
</div>
<!-- 内容区结束 -->

<!-- 添加产品-->
<div class="ui add_product modal">
    <i class="close icon"></i>
    <div class="header_h4">添加产品</div>
    <div class="content">
        <form action="#" class="frm add ui form">
            <div class="two fields">
                <div class="five wide field required">
                    <label class="label_fl" style="margin-right: 1em">产品名称</label>
                    <input type="hidden" name="checkExist" id="checkExist">
                    <input type="text" name="add[name]" ng-model="addData.name" maxlength="30" placeholder="请填写产品名称" style="width: 160px; height: 32px;">
                </div>
                <div class="three wide field"></div>
                <div class="five wide field required">
                    <label class="label_fl">投资顾问</label>
                    <input type="text" style="display:none;" id="add_teacher"  ng-model="addData.manager_id" name="add[manager_id]"/>
                    <div angucomplete-alt id="add_teachername" name="nickname" style="width:160px; float: left" placeholder="投资顾问姓名" pause="100" selected-object="selecteTeacher" local-data="teacherList" search-fields="nickname" input-changed="teacherInputChanged"  title-field="nickname" maxlength="12"
                    minlength="1" input-class="form-control form-control-small" match-class="highlight" focus-first = 'true'
                    focus-in="focusIn()" focus-out="focusOut()" field-required="true">
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <b>归属分公司</b>
                    <span style="padding-left: 1em">总公司</span>
                </div>
                <div class="field">
                    <b>产品类型</b>
                    <span style="padding-left: 1em">标准产品</span>
                </div>
            </div>
            <div class="fields">
                <div class="five wide field required">
                    <label class="label_fl">归属产品线</label>
                    <div class="ui selection dropdown" >
                        <input type="text" style="display:none;" name="add[product_line_code]" ng-model="addData.product_line_code" id="product_line_code">
                        <div class="default text">请选择产品线</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="{{sel.product_line_code}}" ng-repeat="sel in product_line" ng-click="checkNameExist(sel.product_line_code)">{{sel.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="three wide field"></div>
                <div class="five wide field required">
                    <label class="label_fl">风险等级</label>
                    <div class="ui selection dropdown"  style="min-width:160px;float:left;">
                        <input type="text" style="display:none;" name="add[risk_rank]" ng-model="addData.risk_rank">
                        <div class="default text">请选产品风险等级</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="{{dv.sys_param_detail_id}}" ng-repeat="dv in dataRiskRank">{{dv.detail_name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="field">
                <label>备注说明</label>
                <div class="ui left icon input">
                    <textarea type="text" rows="5" ng-model="addData.remark" maxlength="100" style="overflow:hidden"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!-- 编辑标准信息弹出层-->
<div class="ui edit modal">
    <i class="close icon"></i>
    <div class="header_h4">编辑产品</div>
    <div class="content">
        <form action="#" name="frm-edit" class="frm edit">
            <input type="hidden" id="update_product_id" ng-model="editData.product_id" name="edit[product_id]">
            <div class="ui form">
                <div class="two fields">
                    <div class="five wide field required" id="checkDivEdit">
                        <label class="label_fl" style="margin-right: 1em">产品名称</label>
                        <input type="hidden" name="checkExistEdit" id="checkExistEdit">
                        <input type="text" name="edit[name]" ng-model="editData.name" maxlength="30" placeholder="请填写产品名称" style="width: 160px">
                    </div>
                    <div class="three wide field"></div>
                    <div class="five wide field required">
                        <label class="label_fl">投资顾问</label>
                        <input  type="text" style="display:none;" id="update_teacher" name="edit[manager_id]" ng-model="editData.manager_id"/>
                        <div angucomplete-alt id="update_teachername" placeholder="投资顾问姓名" pause="100" selected-object="selecteTeacherEdit" 
                                local-data="teacherList" input-changed="teacherInputChanged" search-fields="nickname" title-field="nickname" 
                                minlength="1" input-class="form-control form-control-small" 
                        match-class="highlight" style="width:160px; float: left;" focus-first = 'true'
                        focus-in="focusIn()" focus-out="focusOut()" field-required="true">
                        </div>
                    </div>
                </div>
                <div class="two fields">
                    <div class="field">
                        <b>归属分公司</b>
                        <span style="padding-left: 1em">总公司</span>
                    </div>
                    <div class="field">
                        <b>产品类型</b>
                        <span style="padding-left: 1em">标准产品</span>
                    </div>
                </div>
                <div class="fields">
                    <div class="inline seven wide field">
                        <b>归属产品线</b>
                        <span>{{editData.line_name}}</span>
                    </div>
                    <div class="one wide field"></div>
                    <div class="six wide field required">
                        <label class="label_fl">风险等级</label>
                        <div class="ui selection dropdown edit_risk"  style="min-width:160px;float:left;">
                            <input type="text" style="display:none;" name="edit[risk_rank]" ng-model="editData.risk_rank">
                            <div class="default text">请选产品风险等级</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" data-value="{{dv.sys_param_detail_id}}"  ng-repeat="dv in dataRiskRank">{{dv.detail_name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="one wide field"></div>
                </div>
                <div class="field">
                    <label>备注说明</label>
                    <div class="ui left icon input">
                        <textarea type="text" rows="5" ng-model="editData.remark" maxlength="100"  style="overflow:hidden">{{editData.remark}}</textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!--确认删除-->
<div class="ui del modal">
    <div class="header" style="text-align: center;">删除产品信息</div>
    <div class="content" style="text-align: center;">
        <i class="huge blue help circle icon"></i>
        <p style="padding-top: 15px;">确认删除该条产品信息吗?</p>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!--成功-->
<div class="ui modal OK" style="text-align: center;">
    <div class="header center aligned">提示</div>
    <div class="content center aligned">
        <i class="huge green check circle outline icon"></i>
        <p style="padding-top: 15px;">{{msg}}</p>
    </div>
</div>

<!--失败-->
<div class="ui modal Fail" style="text-align: center;">
    <div class="header center aligned">提示</div>
    <div class="content center aligned">
        <i class="huge red remove circle outline icon"></i>
        <p style="padding-top: 15px;">{{msg}}</p>
    </div>
</div>

<!-- 系统信息弹出层 is ending here-->

<script type="text/javascript">
function registerHiddenBlur(hiddenID, visibleID) {
    $('#' + visibleID).blur(function() {
        setTimeout(function() {
            $('#' + hiddenID).trigger('blur');
        }, 100);
    });
}
$(function() {
    $('.ui.dropdown').dropdown({
            onChange:function(value, text, $choice){
                $($choice).parent().parent().find('input').val( value );
                $($choice).parent().parent().find('input').trigger('change');
            }
        });
    $.fn.form.settings.rules.checkName = function() {
        var isValid = true;
        var checkExist = $('.frm.add input[name="checkExist"]').val();
        if(checkExist == 'exist')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    $.fn.form.settings.rules.checkNameEdit = function() {
        var isValid = true;
        var checkExistEdit = $('.frm.edit input[name="checkExistEdit"]').val();
        if(checkExistEdit == 'exist')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    /*添加产品*/
    $('.frm.add').form({
        inline: true,
        fields: {
            add_name: {
                identifier: 'add[name]',
                rules: [{
                    type: 'empty',
                    prompt: '产品名称不能为空'
                }
                ,{
                    type: 'checkName',
                    prompt: '同一产品线下产品名不能重复'
                }]
            },
            add_teacher: {
                identifier: 'add[manager_id]',
                rules: [{
                    type: 'empty',
                    prompt: '投资顾问不能为空'
                }]
            },
            product_line_code: {
                identifier: 'add[product_line_code]',
                rules: [{
                    type: 'empty',
                    prompt: '归属产品线不能为空'
                }]
            },
            add_risk_rank: {
                identifier: 'add[risk_rank]',
                rules: [{
                    type: 'empty',
                    prompt: '产品风险不能为空'
                }]
            },
        }
    });
    /*编辑产品*/
    $('.frm.edit').form({
        on: 'blur',
        inline: true,
        fields: {
            update_name: {
                identifier: 'edit[name]',
                rules: [{
                    type: 'empty',
                    prompt: '产品名称不能为空'
                },{
                    type: 'checkNameEdit',
                    prompt: '同一产品线下产品名不能重复'
                }]
            },
            update_teacher: {
                identifier: 'edit[manager_id]',
                rules: [{
                    type: 'empty',
                    prompt: '投资顾问不能为空'
                }]
            },
            edit_risk_rank: {
                identifier: 'edit[risk_rank]',
                rules: [{
                    type: 'empty',
                    prompt: '产品风险不能为空'
                }]
            },
        }
    });
    setTimeout(function() {
        /*add*/
        registerHiddenBlur('add_teacher', 'add_managername_value');
        /*update*/
        registerHiddenBlur('update_teacher', 'update_teachername_value');
    }, 500);
});
</script>